//
//  HeartRateDetailView.swift
//  Kosspot
//
//  Created by 李鑫 on 2025/8/1.
//

import SwiftUI

struct HeartRateDetailView: View {
    @State private var selectedDate: Date = Date()
    let data: [HDataItem] = {
            var items = [HDataItem]()
            for hour in 0..<25 {
                let timeString = String(format: "%02d:00", hour)
                let randomScore = Int.random(in: 0...50)
                items.append(HDataItem(timeRange: timeString, higthValue: Double(randomScore)+20, lowValue: Double(randomScore)))
            }
            return items
        }()
    var body: some View {
        VStack {
            CustomNavigationBar(rightImageName: nil, title: "心率") {}
            HStack {
                WeekdayPicker(backGroundColor: Color(hex: "#E96644")) { Date in
                    print(Date)
                    selectedDate = Date
                }
                Image("日历 1")
                    .resizable()
                    .frame(width: 20,height: 20)
                    .onTapGesture {
                        
                    }
            }
            .padding(.horizontal,12)
            
            ScrollView(.vertical,showsIndicators: false) {
                VStack(alignment: .leading) {
                    Text("4月8日 21：53")
                        .font(.system(size: 14))
                        .foregroundStyle(Color(hex: "#B2B2B2"))
                        .padding(.leading,16)
                        .padding(.top,16)
                    Spacer().frame(height: 8)
                    HStack (spacing: 4) {
                        Text("98")
                            .font(.system(size: 24))
                            .foregroundStyle(Color(hex: "#FFFFFF"))
                        Text("次/分")
                            .font(.system(size: 14))
                            .foregroundStyle(Color(hex: "#FFFFFF"))
                        
                    }
                    .padding(.leading,16)
                    Spacer().frame(height: 12)
                    HeartRateChartView(data: data)
                        .padding(.horizontal,27)
                        .padding(.bottom,16)
                }
                .background(Color(hex: "#1E1E1E"))
                .cornerRadius(16, corners:[.topLeft,.topRight,.bottomLeft,.bottomRight])
                .padding(.horizontal,12)
                Spacer().frame(height: 12)
                
                HStack {
                    Image("xlfw")
                        .resizable()
                        .frame(width: 32,height: 32)
                        .padding(.leading,20)
                    Text("心率范围")
                        .font(.system(size: 16))
                        .foregroundStyle(.white)
                        .padding(.leading,12)
                   
                    Spacer()
                    Text("59-100次/分钟")
                        .font(.system(size: 16))
                        .foregroundStyle(.white)
                        .padding(.trailing,20)
                }
                .frame(height: 56)
                .background(Color(hex: "#1E1E1E"))
                .cornerRadius(16, corners:[.topLeft,.topRight,.bottomLeft,.bottomRight])
                .padding(.horizontal,12)
                
                Spacer().frame(height: 12)
                
                HStack {
                    Image("xyfw")
                        .resizable()
                        .frame(width: 32,height: 32)
                        .padding(.leading,20)
                    Text("静息心率")
                        .font(.system(size: 16))
                        .foregroundStyle(.white)
                        .padding(.leading,12)
                   
                    Spacer()
                    Text("79次/分钟")
                        .font(.system(size: 16))
                        .foregroundStyle(.white)
                        .padding(.trailing,20)
                }
                .frame(height: 56)
                .background(Color(hex: "#1E1E1E"))
                .cornerRadius(16, corners:[.topLeft,.topRight,.bottomLeft,.bottomRight])
                .padding(.horizontal,12)
                
                Spacer().frame(height: 12)
                
                HStack {
                    Image("xlggtx")
                        .resizable()
                        .frame(width: 32,height: 32)
                        .padding(.leading,20)
                    Text("心率过高提醒")
                        .font(.system(size: 16))
                        .foregroundStyle(.white)
                        .padding(.leading,12)
                   
                    Spacer()
                    Text("--次/分钟")
                        .font(.system(size: 16))
                        .foregroundStyle(.white)
                        .padding(.trailing,20)
                }
                .frame(height: 56)
                .background(Color(hex: "#1E1E1E"))
                .cornerRadius(16, corners:[.topLeft,.topRight,.bottomLeft,.bottomRight])
                .padding(.horizontal,12)
                
                Spacer().frame(height: 12)
                
                HStack {
                    Image("xlgdtx")
                        .resizable()
                        .frame(width: 32,height: 32)
                        .padding(.leading,20)
                    Text("心率过低提醒")
                        .font(.system(size: 16))
                        .foregroundStyle(.white)
                        .padding(.leading,12)
                   
                    Spacer()
                    Text("--次/分钟")
                        .font(.system(size: 16))
                        .foregroundStyle(.white)
                        .padding(.trailing,20)
                }
                .frame(height: 56)
                .background(Color(hex: "#1E1E1E"))
                .cornerRadius(16, corners:[.topLeft,.topRight,.bottomLeft,.bottomRight])
                .padding(.horizontal,12)
                Spacer().frame(height: 12)
                
                VStack {
                    VStack {
                        HStack {
                            Image("wenhao")
                                .resizable()
                                .frame(width: 16,height: 16)
                            Text("了解心率数据分析")
                                .font(.system(size: 16))
                                .foregroundStyle(.white)
                            Spacer()
                        }
                        Spacer().frame(height: 12)
                        Spacer().frame(height: 12)
                        Text("安静心率：正常人在安静状态下每分钟心跳次数一般为60-100次。")
                            .font(.system(size: 14))
                            .foregroundStyle(.white)
                            .lineLimit(10)
                        Spacer().frame(height: 10)
                        Text("运动心率：运动过程中根据心率区间可以判断身体的运动状态，选择合适的心率区间才能达到较佳的运动效果。")
                            .font(.system(size: 14))
                            .foregroundStyle(.white)
                            .lineLimit(10)
                    }
                    .padding(.top,20)
                    .padding(.bottom,20)
                    .padding(.horizontal,20)
                }
                .background(Color(hex: "#1E1E1E"))
                .cornerRadius(16, corners:[.topLeft,.topRight,.bottomLeft,.bottomRight])
                .padding(.bottom,20)
                .padding(.horizontal,12)
                
                Spacer()
            }
            Spacer()
        }
        .navigationBarHidden(true)
        .background(Color(hex: "#0A0A0A"))
        .edgesIgnoringSafeArea(.all)
        
        
        
    }
}

#Preview {
    HeartRateDetailView()
}
